<template>
  <div>
    <vxe-grid v-bind="grid" ref="xGrid">
      <template #toolbar_buttons>
        <eip-toolbar
          @asyncDeparment="asyncDeparment"
          @asyncDeparmentToSystem="asyncDeparmentToSystem"
        ></eip-toolbar>
        <a-space class="margin-left-sm">
          <a-button
            icon="fullscreen"
            type="link"
            @click="$refs.xGrid.setAllTreeExpand(true)"
            >展开所有</a-button
          >
          <a-button
            icon="fullscreen-exit"
            type="link"
            @click="$refs.xGrid.clearTreeExpand()"
            >关闭所有</a-button
          >
        </a-space>
      </template>
      <template #toolbar_tools> </template>
      <template #loading>
        <a-spin></a-spin>
      </template>
      <template #empty>
        <eip-empty />
      </template>
      <template #checkboxHeader="{ checked, indeterminate }">
        <span @click.stop="$refs.xGrid.toggleAllCheckboxRow()">
          <a-checkbox :indeterminate="indeterminate" :checked="checked">
          </a-checkbox>
        </span>
      </template>
      <template #checkbox="{ row, checked, indeterminate }">
        <span @click.stop="$refs.xGrid.toggleCheckboxRow(row)">
          <a-checkbox :indeterminate="indeterminate" :checked="checked">
          </a-checkbox>
        </span>
      </template>
    </vxe-grid>
  </div>
</template>

<script>
import {
  query,
  async,
  asyncToSystem,
} from "@/services/wechat/work/department/list";

import { operationConfirm } from "@/utils/util";

export default {
  data() {
    return {
      grid: {
        id: "workDepartmentDepartment",
        loading: true,
        height: this.eipTableHeight(),
        treeConfig: {
          transform: true,
          rowField: "platformOrganizationId",
          parentField: "platformOrganizationParentId",
          reserve: true,
          trigger: "row",
        },
        rowConfig: {
          keyField: "platformOrganizationId",
        },
        menuConfig: {
          header: {
            options: [
              [
                {
                  code: "exportAll",
                  name: "导出所有.csv",
                  prefixIcon: "vxe-icon-download",
                  visible: true,
                  disabled: false,
                },
              ],
            ],
          },
          body: {
            options: [
              [
                {
                  code: "print",
                  name: "打印",
                  prefixIcon: "vxe-icon-print",
                  visible: true,
                  disabled: false,
                },
                {
                  code: "export",
                  name: "导出.csv",
                  prefixIcon: "vxe-icon-download",
                  visible: true,
                  disabled: false,
                },
              ],
            ],
          },
          footer: {
            options: [
              [
                {
                  code: "exportAll",
                  name: "导出所有.csv",
                  prefixIcon: "vxe-icon-download",
                  visible: true,
                  disabled: false,
                },
              ],
            ],
          },
        },
        filterConfig: {
          remote: true,
        },
        sortConfig: {
          remote: true,
        },
        printConfig: {},
        exportConfig: {},
        toolbarConfig: {
          slots: {
            buttons: "toolbar_buttons",
            tools: "toolbar_tools",
          },
        },
        proxyConfig: {
          seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
          sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
          filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
          ajax: {
            query: ({ page, sorts, filters, form }) => {
              return new Promise((resolve) => {
                query({ filters: this.eipTableFilter(filters) }).then(
                  (result) => {
                    if (result.code == this.eipResultCode.success) {
                      resolve(result.data);
                    }
                    this.grid.loading = false;
                  }
                );
              });
            },
          },
        },
        columns: [
          { type: "seq", width: 60, fixed: "left" },
          {
            field: "platformOrganizationId",
            title: "企业微信编码",
            width: 160,
            showOverflow: "ellipsis",
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "name",
            title: "全称",
            minWidth: 220,
            treeNode: true,
            showOverflow: "ellipsis",
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "platformOrganizationParentId",
            title: "上级编码",
            width: 120,
            showOverflow: "ellipsis",
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },

          {
            field: "createUserName",
            title: "创建人",
            width: 150,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "createTime",
            title: "创建时间",
            width: 150,
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "datetime",
                  op: "cn",
                  write: null,
                  min: null,
                  max: null,
                },
              },
            ],
          },
          {
            field: "updateUserName",
            title: "修改人",
            width: 150,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "updateTime",
            title: "修改时间",
            width: 150,
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "datetime",
                  op: "cn",
                  write: null,
                  min: null,
                  max: null,
                },
              },
            ],
          },
        ],
        data: [],

        extend: {
          id: null,
        },
      },
    };
  },

  methods: {
    /**
     * 菜单树
     */
    initTable() {
      this.$refs.xGrid.commitProxy("query");
    },

    /**
     * 同步
     */
    asyncDeparment() {
      let that = this;
      that.$loading.show({ text: "获取中" });
      async()
        .then((result) => {
          that.$loading.hide();
          that.$message.destroy();
          if (result.code === that.eipResultCode.success) {
            that.$message.success(result.msg);
            that.init();
          } else {
            that.$message.error(result.msg);
          }
        })
        .catch((err) => {
          that.$loading.hide();
          that.$message.destroy();
        });
    },

    /**
     * 同步
     */
    asyncDeparmentToSystem() {
      let that = this;
      operationConfirm(
        "确定同步到系统组织,同步后组织关系发生变化",
        function () {
          that.$loading.show({ text: "同步中" });
          asyncToSystem()
            .then((result) => {
              that.$loading.hide();
              that.$message.destroy();
              if (result.code === that.eipResultCode.success) {
                that.$message.success(result.msg);
              } else {
                that.$message.error(result.msg);
              }
            })
            .catch((err) => {
              that.$loading.hide();
              that.$message.destroy();
            });
        },
        that
      );
    },
  },
};
</script>
